<template>
  <div class="talk" @keyup.enter="openTalk">
    <label for="username">
      输入登陆的用户名：
      <el-input
        type="text"
        id="username"
        v-model="username"
        clearable
        class="text-input"
        maxlength="20"
      />
    </label>
    <p />
    <label for="targetUser">
      参与会话的对象：
      <el-input
        type="text"
        id="targetUser"
        v-model="targetUser"
        clearable
        class="text-input"
        maxlength="20"
      />
    </label>
    <p />
    <!-- <router-link to="/talk-frame">Go to Foo</router-link> -->
    <el-button type="primary" icon="el-icon-phone-outline" @click="openTalk">点击打开页面开始聊天</el-button>
  </div>
</template>
<script>
// import { LoginPackage } from '../Bean';
// import OnlineFrame from "../components/OnlineFrame";
import { RouterUtil } from "../routerUtil";
export default {
  data() {
    return {
      username: "",
      targetUser: ""
    };
  },
  methods: {
    openTalk() {
      if (!this.username) {
        this.$message.closeAll();
        this.$message.warning("请输入用户名");
        return;
      }
      RouterUtil.open(this.$router, {
        path: "/talk-frame",
        query: { user: this.username, target: this.targetUser }
      });
      this.username = "";
      this.$emit('openTalk');
    },
    quickTalk(targetUser) {
      if (!this.currentUser) {
        this.$prompt("请输入用户名", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(({ value }) => {
            if (!value) {
              this.$message.closeAll();
              this.$message.warning("请输入用户名");
              return;
            }
            this.openFrame(value, targetUser);
          })
          .catch(() => {});
        return;
      }
      this.openFrame(this.currentUser, targetUser);
    },
    openFrame(user, targetUser) {
      RouterUtil.open(this.$router, {
        path: "/talk-frame",
        query: {
          user: user,
          target: targetUser
        }
      });
    }
  }
  // components: {
  //   OnlineFrame
  // }
};
</script>
<style scoped>
.talk {
  /* position: fixed;
  top: 30%;
  left: 44%;
  right: 56%; */
  border: black solid 3px;
  padding: 10px;
  width: 250px;
  min-width: 250px;
  /* margin: 0 auto; */
  border-radius: 3px;
  background-color: white;
}
/* .el-input{
  display: table-cell;
  padding: 5px;
} */
.el-button {
  display: block;
  margin: 0 auto;
}
label {
  line-height: 35px;
}
/* .click-talk{
  position: fixed;
  background-image: url("../assets/background-imge.jpeg");
  background-repeat: repeat;
  overflow: hidden;
  width:100%;
  height:100%;
} */
.click-talk {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}
/* .text-input{
  width: 200px;
} */
</style>